<template>
  <div class="container clearfix">
    <div class="filter">
      <h2 class="title">
        筛选查询
      </h2>
      <div class="section">
        <span class="tip">
          成员姓名
        </span>
        <div class="content">
          <el-input v-model="search_form.realName"
                    placeholder="请输入内容" />
        </div>
      </div>
      <div class="section">
        <span class="tip">
          成员角色
        </span>
        <div class="content">
          <el-select v-model="search_form.role"
                     placeholder="请选择">
            <el-option v-for="(item,index) in role_list"
                       :key="index"
                       :label="item.label"
                       :value="item.value" />
          </el-select>
        </div>
      </div>

      <div class="btn-bar">
        <el-button type="primary"
                   siae="small"
                   icon="el-icon-search"
                   @click="search()">查询结果</el-button>
        <el-button type="primary"
                   @click="add_member()">添加成员<i class="el-icon-upload el-icon--right" /></el-button>
      </div>
    </div>
    <div class="data-table">
      <el-table v-loading="table_loading"
                :data="tableData"
                border
                height="660"
                align="center"
                style="width: 100%">

        <el-table-column type="index"
                         width="50"
                         align="center"
                         label="序号" />

        <el-table-column prop="realName"
                         align="center"
                         label="姓名" />
        <el-table-column prop="email"
                         align="center"
                         width="150"
                         label="邮箱" />
        <el-table-column prop="roleNames"
                         align="center"
                         label="角色" />
        <el-table-column prop="phone"
                         width="150"
                         align="center"
                         label="手机号" />
        <el-table-column prop="lastLoginDate"
                         align="center"
                         width="200"
                         label="最后登录时间" />
        <el-table-column align="center"
                         label="状态">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status"
                       active-color="#13ce66"
                       inactive-color="#ff4949"
                       :active-value="0"
                       :inactive-value="1"
                       @change="change_status(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column fixed="right"
                         label="操作"
                         align="center">
          <template slot-scope="scope">
            <el-button type="danger"
                       size="small"
                       @click="delete_item(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-controller">
      <!-- <el-pagination layout="prev, pager, next"
                     :hide-on-single-page="true"
                     @current-chang="change_page"
                     :total="page_total">
      </el-pagination> -->
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="data_total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

  </div>

</template>

<script>
import axios from '@/utils/request'
import { getList, listAdminRoleDTO, modifyAdminUserStatus } from '../../../api/adminManage'
export default {
  data () {
    return {
      table_loading: false,
      class_arr: [
      ],
      status_arr: [
        {
          value: 1,
          label: '已上架'
        }, {
          value: 0,
          label: '未上架'
        }
      ],
      // page_total: 1,
      tableData: [],
      page: 1,
      pageSize: 10,
      page_total: 1,
      data_total: 0,
      search_form: {
        //   成员名称
        realName: null,
        //   成员角色
        role: null
      },
      role_list: [],
      role: '',
      model: 0 // 0 初次加载  1 筛选

    }
  },
  created () {
    this.get_list()
    this.get_rolelist()
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.page = 1
      this.get_list()
    },
    handleCurrentChange(val) {
      this.page = val
      this.get_list()
    },
    // 删除项目
    delete_item (row) {
      const that = this
      this.$confirm('确认删除该成员？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        that.change_status(row, -1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取列表
    get_list(options) {
      if (this.model === 0) {
        options = {
          'pageNum': this.page,
          'pageSize': this.pageSize
        }
      }
      this.table_loading = true
      getList(options).then((result) => {
          let res = result.data
          if (res.code === 0) {
            this.tableData = res.data.userResponseDTOS
            this.data_total = res.data.count
            this.page_total = Math.ceil(res.data.count / this.pageSize)
            this.table_loading = false
          }
        }).catch((err) => {
          this.table_loading = false
          //   this.$message.error('服务器网络错误，请稍后重试');
          this.$message.error(err)
        })
    },
    add_member () {
      this.$router.push({
        path: '/add_member'
      })
    },
    // 筛选
    search() {
      this.model = 1
      let form_data = this.search_form
      this.get_list({
        "pageNum": this.page,
        "pageSize": this.pageSize,
        "roleId": form_data.role,
        'realName': form_data.realName
      })
    },
    change_status (row, status) {
      console.log(row)
      modifyAdminUserStatus({
        userId: row.id,
        status: status || row.status
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          this.$message({
            message: '状态修改成功',
            type: 'success'
          })
          this.get_list()
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    // 翻页
    change_page (page) {
      console.log(page)
      this.page = page
      this.get_list()
    },
    get_rolelist () {
      listAdminRoleDTO( {
        'pageNum': 1,
        'pageSize': 1000
      }).then((result) => {
        const res = result.data
        if (res.code === 0) {
          if (res.data.roleResponseDTOS) {
            const arr = []
            res.data.roleResponseDTOS.forEach(val => {
              arr.push({
                value: val.id + '',
                label: val.roleName
              })
            })
            arr.unshift({
              value: null,
              label: '全部'
            })
            this.role_list = arr
          }
        } else {
          this.$message.error(res.msg)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    }
  }

}
</script>
<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  .filter {
    margin: 20px;
    background-color: #fff;
    box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 20px;
    position: relative;
    .title {
      font-size: 16px;
    }
    .section {
      display: inline-block;
      vertical-align: middle;
      margin-right: 20px;
      margin-top: 16px;
      .tip {
        font-size: 14px;
        display: inline-block;
        vertical-align: middle;
        margin-right: 5px;
      }
      .content {
        display: inline-block;
        vertical-align: middle;
      }
      .inp {
        display: inline-block;
        vertical-align: middle;
        border: none;
        outline: none;
        border: 1px solid #ccc;
        border-radius: 4px;
        padding: 6px;
      }
    }
    .btn-bar {
      position: absolute;
      right: 20px;
      top: 20px;
    }
  }
  .data-table {
    margin: 20px;
    background-color: #fff;
    box-sizing: border-box;
  }
  .page-controller {
    float: right;
    margin-right: 20px;
  }
}
</style>

